<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-card style="background-color: rgba(255,255,255,0.9)" class="archive-card">
        <div slot="header" class="total">
          <div class="titleIndex">
            <i class="el-icon-date"></i>
            <span>文章归档</span>
          </div>
        </div>
        <div class="archive-container">
          <el-timeline>
            <el-timeline-item 
              v-for="year in archiveList" 
              :key="year.year"
              :timestamp="year.year + '年'"
              placement="top"
              type="primary"
              size="large"
            >
              <el-card shadow="hover" class="year-card">
                <div class="year-header">
                  <h3>{{ year.year }}年</h3>
                  <span class="year-count">共 {{ year.total }} 篇文章</span>
                </div>
                <el-collapse v-model="year.activeMonths" accordion>
                  <el-collapse-item 
                    v-for="month in year.months" 
                    :key="month.month"
                    :title="`${month.month}月 (${month.blogs.length}篇)`"
                    :name="month.month"
                  >
                    <div class="blog-list">
                      <div 
                        v-for="blog in month.blogs" 
                        :key="blog.id"
                        class="blog-item"
                        @click="goToBlog(blog.id)"
                      >
                        <span class="blog-date">{{ blog.date }}</span>
                        <span class="blog-title">{{ blog.title }}</span>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Archive',
  data() {
    return {
      archiveList: [
        {
          year: 2024,
          total: 45,
          activeMonths: [],
          months: [
            {
              month: 12,
              blogs: [
                { id: 1, title: 'Vue3 组合式API深度解析', date: '2024-12-15' },
                { id: 2, title: 'JavaScript异步编程实践', date: '2024-12-10' },
                { id: 3, title: 'React Hooks最佳实践', date: '2024-12-05' }
              ]
            },
            {
              month: 11,
              blogs: [
                { id: 4, title: 'Spring Boot微服务架构', date: '2024-11-25' },
                { id: 5, title: 'MySQL性能优化技巧', date: '2024-11-20' },
                { id: 6, title: 'Redis缓存策略', date: '2024-11-15' },
                { id: 7, title: 'Docker容器化部署', date: '2024-11-10' }
              ]
            },
            {
              month: 10,
              blogs: [
                { id: 8, title: '前端工程化实践', date: '2024-10-28' },
                { id: 9, title: 'TypeScript高级特性', date: '2024-10-22' },
                { id: 10, title: 'Webpack配置优化', date: '2024-10-18' }
              ]
            }
          ]
        },
        {
          year: 2023,
          total: 38,
          activeMonths: [],
          months: [
            {
              month: 9,
              blogs: [
                { id: 11, title: '算法与数据结构学习笔记', date: '2023-09-30' },
                { id: 12, title: 'LeetCode刷题心得', date: '2023-09-25' },
                { id: 13, title: '动态规划算法详解', date: '2023-09-20' }
              ]
            },
            {
              month: 8,
              blogs: [
                { id: 14, title: 'Git版本控制最佳实践', date: '2023-08-28' },
                { id: 15, title: 'Linux命令速查手册', date: '2023-08-22' },
                { id: 16, title: 'Nginx配置详解', date: '2023-08-18' }
              ]
            }
          ]
        },
        {
          year: 2022,
          total: 32,
          activeMonths: [],
          months: [
            {
              month: 7,
              blogs: [
                { id: 17, title: 'Vue2到Vue3迁移指南', date: '2022-07-30' },
                { id: 18, title: '前端性能优化方案', date: '2022-07-25' },
                { id: 19, title: '移动端适配方案', date: '2022-07-20' }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    goToBlog(id) {
      this.$router.push({
        path: '/cmsBlog',
        query: { id }
      })
    }
  }
}
</script>

<style scoped>
.archive-card {
  margin-top: 20px;
}

.titleIndex {
  display: flex;
  align-items: center;
  font-size: larger;
  font-weight: bold;
}

.titleIndex i {
  margin-right: 10px;
  color: #409eff;
  font-size: 20px;
}

.archive-container {
  padding: 20px;
}

.year-card {
  margin-bottom: 20px;
}

.year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.year-header h3 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.year-count {
  color: #909399;
  font-size: 14px;
}

.blog-list {
  padding: 10px 0;
}

.blog-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.blog-item:hover {
  background-color: #f5f7fa;
  transform: translateX(5px);
}

.blog-date {
  color: #909399;
  font-size: 14px;
  margin-right: 15px;
  min-width: 100px;
}

.blog-title {
  color: #303133;
  font-size: 15px;
  flex: 1;
}

.blog-title:hover {
  color: #409eff;
}

@media screen and (max-width: 768px) {
  .archive-container {
    padding: 10px;
  }
  
  .year-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .year-count {
    margin-top: 5px;
  }
  
  .blog-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .blog-date {
    margin-bottom: 5px;
  }
}
</style>

